<template>
    <div class="ChartBox">
        <div :id=id style="width: 100%; height: 410px;"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";

export default {
    name: 'charttest',
    props: {
        id: String,
        text: String,
        chartlist: Array,

    },

    data() {
        return {};
    },

    mounted() {
        this.initChart(this.chartlist, this.id, this.text);

    },
    methods: {
        initChart() {
            // 创建 echarts 实例。
            // var myChart = echarts.init(document.getElementById('Chart2'));
            // 指定图表的配置项和数据
            let chartDom = document.getElementById(this.id);
            // type EChartsOption = echarts.EChartsOption;
            let myChart = echarts.init(chartDom);
            // let option

            var option = {
                title: {
                    text: this.text,
                    textStyle: {//标题内容的样式
                        color: '#000',
                        fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                        fontFamily: "PingFangHK-Medium",//主题文字字体，默认微软雅黑
                        fontSize: 14//主题文字字体大小，默认为18px

                    },
                    padding: 15,//各个方向的内边距，默认是15，可以自行设置

                },
                tooltip: {
                    trigger: 'item'
                },
                legend: [


                    {
                        itemHeight: 9,//改变圆圈大小
                        bottom: '5%',
                        // left: 'center',
                        icon: 'circle',//改变图标形状，circle为圆形
                        orient: 'vertical',//水平排列。（vertical为垂直排列}
                        data: this.chartlist.slice(0, 3),
                        x: "left",
                        left: '15%',
                    },
                    {
                        itemHeight: 9,//改变圆圈大小
                        bottom: '5%',
                        // left: 'center',
                        icon: 'circle',//改变图标形状，circle为圆形
                        orient: 'vertical',//水平排列。（vertical为垂直排列}
                        data: this.chartlist.slice(3, 5),
                        x: "left",
                        left: '60%',
                    }


                ],
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        center: ['50%', '42%'],//改变饼图所在的位置，第一个是左右，第二个是上下
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.chartlist,


                    }
                ]

            };
            option && myChart.setOption(option);
        },
    },
};
</script>
<style  scoped>
.ChartBox {

    box-shadow: 0px 2px 7px 0px rgb(224, 224, 224);
    width: 400px;
}
</style>
  